<!DOCTYPE html>
<html>
<head>
    <title>客户端管理</title>
    {% include 'system/common/header.html' %}
    <!-- 修改样式部分 -->
    <style>
        /* 设置表格单元格样式 */
    .layui-table-cell {
        position: relative !important;
        overflow: visible !important;
        height: auto !important;
    }

    /* 下拉框容器样式 */
    .layui-table-cell .layui-form-select {
        position: static !important;
    }

    /* 下拉选项列表样式 */
    .layui-form-select dl {
        position: fixed !important; /* 使用fixed定位脱离文档流 */
        left: auto !important;
        top: auto !important;
        min-width: 100px !important;
        max-height: 300px !important;
        z-index: 9999999 !important; /* 使用更高的z-index */
        /* overflow-y: auto !important; */
    }

    /* 确保所有容器不遮挡下拉框 */
    .layui-table-box,
    .layui-table-view,
    .layui-card,
    .layui-form {
        overflow: visible !important;
    }

    /* 输入框样式 */
    .layui-form-select .layui-input {
        position: relative !important;
        z-index: 999999 !important;
    }

    /* 下拉框展开时的样式 */
    .layui-form-selected dl {
        display: block !important;
    }

    /* 确保下拉框选项在点击时可见 */
    .layui-layer-shade {
        z-index: 999998 !important;
    }
    
    /* 防止下拉框被其他元素遮挡 */
    .layui-form-select dl dd.layui-this {
        /* background-color: #5FB878 !important; */
        z-index: 9999999 !important;
    }
</style>

</head>

<body class="pear-container">
    <!-- 搜索框 -->
    <div class="layui-card">
        <div class="layui-card-body">
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">客户端ID</label>
                        <div class="layui-input-inline">
                            <input type="text" name="androidId" placeholder="请输入客户端ID" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">设备型号</label>
                        <div class="layui-input-inline">
                            <input type="text" name="deviceName" placeholder="请输入设备型号" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="client-query">
                            <i class="layui-icon layui-icon-search"></i>查询
                        </button>
                        <button type="reset" class="pear-btn pear-btn-md">
                            <i class="layui-icon layui-icon-refresh"></i>重置
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- 数据表格 -->
    <div class="layui-card">
        <div class="layui-card-body">
            <table id="client-table" lay-filter="client-table"></table>
        </div>
    </div>
    <!-- 授权状态模板 -->
    <script type="text/html" id="client-authorize">
        {% raw %}
        <input type="checkbox" name="authorize" value="{{d.id}}" lay-skin="switch" lay-text="已授权|未授权" lay-filter="client-authorize" {{ d.authorize ? 'checked' : '' }}>
        {% endraw %}
    </script>
    <!-- 配置文件模版 -->
    <script type="text/html" id="client-configFile">
        <select name="configFile" id="client-configFile_1" lay-filter="configFile" lay-verify="required" class="layui-form-select">
            <option value="">请选择配置文件</option>
        </select>
    </script>


    <!-- 表格工具栏 -->
    {% if authorize("system:iptvadmin:client") %}
    <script type="text/html" id="client-toolbar">
        <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="batchRemove">
            <i class="layui-icon layui-icon-delete"></i>
            删除
        </button>
    </script>
    {% endif %}

    <!-- 行工具栏 -->
    <script type="text/html" id="client-bar">
        {% if authorize("system:iptvadmin:remove") %}
        <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove">
            <i class="layui-icon layui-icon-delete"></i>
        </button>
        {% endif %}
    </script>

    {% include 'system/common/footer.html' %}

    <script>
        layui.use(['table', 'form', 'jquery'], function() {
            let table = layui.table;
            let form = layui.form;
            let $ = layui.jquery;

            let MODULE_PATH = "/iptvadmin/client/";
            let CONFIG_FILE_PATH = "/iptvadmin/client/config/data"; // 获取配置文件列表的API路径
            // 添加配置文件选择功能
            table.on('edit(client-table)', function(obj) {
                if (obj.field === 'configFile') {
                    let loading = layer.load();
                    $.post(MODULE_PATH + 'updateConfig', {
                        id: obj.data.id,
                        configFile: obj.value
                    }, function(result) {
                        layer.close(loading);
                        if (result.success) {
                            layer.msg('配置文件更新成功', {icon: 1});
                            table.reload('client-table');
                        } else {
                            layer.msg(result.msg || '更新失败', {icon: 2});
                            obj.update({configFile: obj.data.configFile});
                        }
                    }).fail(function() {
                        layer.close(loading);
                        layer.msg('服务器错误', {icon: 2});
                        obj.update({configFile: obj.data.configFile});
                    });
                }
            });
            // 更新配置文件的函数
            function updateConfigFile(id, configFile) {
                let loading = layer.load();
                $.post(MODULE_PATH + '/data/updateConfig', {
                    id: id,
                    configFile: configFile
                }, function(result) {
                    layer.close(loading);
                    if (result.success) {
                        layer.msg('配置文件更新成功', {icon: 1});
                    } else {
                        layer.msg(result.msg || '更新失败', {icon: 2});
                        tableIns.reload(); // 刷新表格
                    }
                }).fail(function() {
                    layer.close(loading);
                    layer.msg('服务器错误', {icon: 2});
                    tableIns.reload();
                });
            }
            // 监听下拉框点击事件，动态调整位置
            $(document).on('click', '.layui-form-select', function(e) {
                let $select = $(this);
                let $dl = $select.find('dl');
                let offset = $select.offset();
                
                // 计算下拉框位置
                setTimeout(function() {
                    $dl.css({
                        'position': 'fixed',
                        'left': offset.left,
                        'top': offset.top + $select.outerHeight(),
                        'width': $select.width()
                    });
                }, 0);
            });

            // 点击其他区域关闭下拉框
            $(document).on('click', function(e) {
                if (!$(e.target).closest('.layui-form-select').length) {
                    $('.layui-form-select').removeClass('layui-form-selected');
                }
            });
            

            // 优化表格渲染
            let tableIns = table.render({
                elem: '#client-table',
                url: MODULE_PATH + 'data',
                page: true,
                limits: [10, 20, 50, 100],
                limit: 20,
                cols: [[
                    {type: 'checkbox'},
                    {field: 'id', title: 'ID', sort: true, width: 80},
                    {field: 'androidId', title: '客户端ID', width: 180},
                    {field: 'deviceBrand', title: '设备品牌', width: 120},
                    {field: 'deviceName', title: '设备型号', width: 150},
                    {field: 'deviceOsVer', title: '系统版本', width: 150},
                    {field: 'authorize', title: '授权状态', templet: '#client-authorize', width: 120},
                    {field: 'configFile', title: '配置文件', width: 150, templet: function(d) {
                        let html = '<select lay-filter="configSelect_' + d.id + '" data-id="' + d.id + '">';
                        html += '<option value="">请选择配置文件</option>';
                        d.json_files && d.json_files.forEach(function(file) {
                            html += '<option value="' + file + '" ' + (d.configFile === file ? 'selected' : '') + '>' + file + '</option>';
                        });
                        html += '</select>';
                        return html;
                    }},
                    {field: 'createTime', title: '创建时间', width: 180},
                    {title: '操作', toolbar: '#client-bar', align: 'center', width: 130}
                ]],
                skin: 'line',
                toolbar: '#client-toolbar',
                defaultToolbar: ['filter', 'print', 'exports'],
                done: function(res) {
                    // 渲染完成后重新渲染表单元素
                    form.render('select');
                    
                    // 绑定select改变事件
                    $('select[lay-filter^="configSelect_"]').each(function() {
                        let id = $(this).data('id');
                        form.on('select(configSelect_' + id + ')', function(data) {
                            updateConfigFile(id, data.value);
                        });
                    });
                }
            });
            
            
            // 优化查询功能
            form.on('submit(client-query)', function(data) {
                // 验证输入
                if (data.field.androidId) {
                    data.field.androidId = data.field.androidId.trim();
                }
                if (data.field.deviceName) {
                    data.field.deviceName = data.field.deviceName.trim();
                }
                
                tableIns.reload({
                    where: data.field,
                    page: {curr: 1}
                });
                return false;
            });

            // 工具栏事件
            table.on('toolbar(client-table)', function(obj) {
                if (obj.event === 'batchRemove') {
                    window.batchRemove(obj);
                } else if (obj.event === 'clear30') {
                    window.clearLogs(30);
                } else if (obj.event === 'clear90') {
                    window.clearLogs(90);
                }
            });

            // 行工具栏事件
            table.on('tool(client-table)', function(obj) {
                if (obj.event === 'remove') {
                    window.remove(obj);
                }
            });

            // 监听授权开关切换
            form.on('switch(client-authorize)', function(obj) {
                let loading = layer.load();
                $.post(MODULE_PATH + 'authorize', {
                    id: this.value,
                    authorize: obj.elem.checked ? 1 : 0
                }, function(result) {
                    layer.close(loading);
                    if (result.success) {
                        layer.msg(result.msg, {icon: 1});
                    } else {
                        layer.msg(result.msg, {icon: 2});
                        $(obj.elem).prop('checked', !obj.elem.checked);
                        form.render('checkbox');
                    }
                });
            });

            // 删除单个客户端
            window.remove = function(obj) {
                layer.confirm('确定要删除该客户端？', {
                    icon: 3,
                    title: '提示'
                }, function(index) {
                    layer.close(index);
                    let loading = layer.load();
                    $.post(MODULE_PATH + "data/remove", {
                        id: obj.data['id']
                    }, function(result) {
                        layer.close(loading);
                        if (result.success) {
                            layer.msg(result.msg, {
                                icon: 1,
                                time: 1000
                            }, function() {
                                obj.del();
                            });
                        } else {
                            layer.msg(result.msg, {
                                icon: 2,
                                time: 1000
                            });
                        }
                    });
                });
            }



            // 批量删除
            window.batchRemove = function(obj) {
                let checkStatus = table.checkStatus('client-table');
                let data = checkStatus.data;
                if (data.length === 0) {
                    layer.msg("未选中数据", {
                        icon: 2,
                        time: 1000
                    });
                    return false;
                }
                let ids = data.map(item => item.androidId);
                layer.confirm('确定要删除选中的客户端？', {
                    icon: 3,
                    title: '提示'
                }, function(index) {
                    layer.close(index);
                    let loading = layer.load();
                    $.post(MODULE_PATH + "data/batchRemove", {
                        ids: ids.join(",")
                    }, function(result) {
                        layer.close(loading);
                        if (result.success) {
                            layer.msg(result.msg, {
                                icon: 1,
                                time: 1000
                            }, function() {
                                table.reload('client-table');
                            });
                        } else {
                            layer.msg(result.msg, {
                                icon: 2,
                                time: 1000
                            });
                        }
                    });
                });
            }
        });
    </script>
</body>
</html>